<template>
  <div class="home">
    <input
      type="text"
      v-model="title"
      @keydown.up="up"
      @keydown.down="down"
      @keydown.enter="search"
    />

    <list :list="list" :flag="flag" @enterCon="enterCon" />
  </div>
</template>

<script>
import list from "../components/List.vue";
export default {
  data() {
    return {
      list: [
        { title: "爱奇艺尖叫夜" },
        { title: "微博之夜" },
        { title: "王者之夜" },
        { title: "lol之夜" },
        { title: "摩尔庄园之夜" },
        { title: "洛克王国之夜" },
        { title: "阴阳师之夜" },
      ],
      flag: 0,
      title: "",
    };
  },
  components: {
    list,
  },
  mounted() {
    this.title = this.list[0].title;
  },

  methods: {
    enterCon(i) {
      this.flag = i;
      // this.title = this.list[i].title;
    },
    up() {
      this.flag--;
      if (this.flag < 0) {
        this.flag = this.list.length - 1;
      }
    },
    down() {
      this.flag++;
      if (this.flag > this.list.length - 1) {
        this.flag = 0;
      }
    },
    search() {
      this.$router.push({ path: "/search", query: { title: this.title } });
    },
  },
  watch: {
    flag(newval) {
      this.title = this.list[newval].title;
    },
  },
};
</script>
<style lang="scss" scoped></style>
